import React, { useEffect } from "react";
import * as echarts from "echarts";
export default function BarGraph1() {
  useEffect(() => {
    echartsInit();
  }, []);
  const echartsInit = () => {
    const myChart = echarts.init(document.getElementById("BarGraph1"));
    const myChart2 = echarts.init(document.getElementById("BarGraph2"));
    const myChart3 = echarts.init(document.getElementById("BarGraph3"));
    const myChart4 = echarts.init(document.getElementById("BarGraph4"));
    const myChart5 = echarts.init(document.getElementById("BarGraph5"));
    const myChart6 = echarts.init(document.getElementById("BarGraph6"));
    const option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        left: "2%",
        top: "10px",
        right: "1%",
        bottom: "4%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: [
            "商超门店",
            "教育培训",
            "房地产",
            "生活服务",
            "汽车销售",
            "旅游酒店",
            "五金建材",
          ],
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
              width: 1,
              type: "solid",
            },
          },

          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            // rotate:50,
            show: true,
            splitNumber: 15,
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: "12",
            },
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            //formatter: '{value} %'
            show: true,
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: "12",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1	)",
              width: 1,
              type: "solid",
            },
          },
          // splitLine: {
          //   lineStyle: {
          //     color: "rgba(255,255,255,.1)",
          //   },
          // },
        },
      ],
      series: [
        {
          type: "bar",
          name: "模块标题样式",
          label: {
            show: true,
          },
          showBackground: true,
          backgroundStyle: "rgba(180, 180, 180, 0.2)",
          data: [120, 200, 150, 80, 70, 110, 130],
          barWidth: "35%", //柱子宽度
          itemStyle: {
            normal: {
              color: "#2f89cf",
              opacity: 1,
              barBorderRadius: 5,
            },
          },
        },
      ],
    };

    const option2 = {
      tooltip: {
        trigger: "axis",
        axisPointer: { type: "shadow" },
      },
      grid: {
        left: "0%",
        top: "10px",
        right: "0%",
        bottom: "4%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: ["浙江", "上海", "江苏", "广东", "北京", "深圳", "安徽"],
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
              width: 1,
              type: "solid",
            },
          },

          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            // rotate:50,
            show: true,
            splitNumber: 15,
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: "12",
            },
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            //formatter: '{value} %'
            show: true,
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: "12",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1	)",
              width: 1,
              type: "solid",
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
        },
      ],
      series: [
        {
          type: "bar",
          data: [1500, 1200, 600, 200, 300, 300, 900],
          barWidth: "35%", //柱子宽度
          // barGap: 1, //柱子之间间距
          itemStyle: {
            normal: {
              color: "#27d08a",
              opacity: 1,
              barBorderRadius: 5,
            },
          },
        },
      ],
    };
    const option3 = {
      tooltip: {
        trigger: "item",
      },
      grid: {
        right: 20,
      },
      legend: {
        // top: '5%',
        // left: 'center'
        type: "plain",
        bottom: "1px",
        orient: "vertical",
        left: "10%",
        top: "center",
        textStyle: {
          color: "#fff",
        },
      },
      series: [
        {
          left: "50%",
          name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: true,
          itemStyle: {
            borderRadius: 10,
            // borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            show: false,
            position: "center",
          },
          // emphasis: {
          //   label: {
          //     show: true,
          //     fontSize: 40,
          //     fontWeight: 'bold'
          //   }
          // },
          labelLine: {
            show: true,
          },
          data: [
            { value: 1048, name: "Search Engine" },
            { value: 735, name: "Direct" },
            { value: 580, name: "Email" },
            { value: 484, name: "Union Ads" },
            { value: 300, name: "Video Ads" },
          ],
        },
      ],
    };
    const option4 = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          lineStyle: {
            color: "#dddc6b",
          },
        },
      },
      legend: {
        top: "0%",
        data: ["华为", "IOS"],
        textStyle: {
          color: "rgba(255,255,255,.5)",
          fontSize: "12",
        },
      },
      grid: {
        left: "10",
        top: "30",
        right: "10",
        bottom: "10",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12,
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.2)",
            },
          },

          data: [
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "11",
            "12",
          ],
        },
        {
          axisPointer: { show: false },
          axisLine: { show: false },
          position: "bottom",
          offset: 20,
        },
      ],
      yAxis: [
        {
          type: "value",
          axisTick: { show: false },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12,
            },
          },

          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
        },
      ],
      series: [
        {
          name: "华为",
          type: "line",
          smooth: true,
          symbol: "circle",
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              color: "#0184d5",
              width: 2,
            },
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(1, 132, 213, 0.4)",
                  },
                  {
                    offset: 0.8,
                    color: "rgba(1, 132, 213, 0.1)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },
          },
          itemStyle: {
            normal: {
              color: "#0184d5",
              borderColor: "rgba(221, 220, 107, .1)",
              borderWidth: 12,
            },
          },
          data: [
            3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4, 3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2,
            4,
          ],
        },
        {
          name: "IOS",
          type: "line",
          smooth: true,
          symbol: "circle",
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              color: "#00d887",
              width: 2,
            },
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(0, 216, 135, 0.4)",
                  },
                  {
                    offset: 0.8,
                    color: "rgba(0, 216, 135, 0.1)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },
          },
          itemStyle: {
            normal: {
              color: "#00d887",
              borderColor: "rgba(221, 220, 107, .1)",
              borderWidth: 12,
            },
          },
          data: [
            5, 3, 5, 6, 1, 5, 3, 5, 6, 4, 6, 4, 8, 3, 5, 6, 1, 5, 3, 7, 2, 5, 1,
            4,
          ],
        },
      ],
    };

    var dataStyle = {
      normal: {
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        //shadowBlur: 40,
        //shadowColor: 'rgba(40, 40, 40, 1)',
      },
    };
    var placeHolderStyle = {
      normal: {
        color: "rgba(255,255,255,.05)",
        label: { show: false },
        labelLine: { show: false },
      },
      emphasis: {
        color: "rgba(0,0,0,0)",
      },
    };

    const option5 = {
      title: {
        text: "漏斗图",
      },
      tooltip: {
        trigger: "item", //数据项图形触发
        //{a}: 系列名称，就是 series 中的 name
        //{b}: 类目值， 就是 x 轴的分类名
        //{c}: 数值， 当前分类对应的数值
        //<br/>换行
        formatter: "{a} <br/>{b} : {c}%", //回调函数
      },
      toolbox: {
        //工具栏
        feature: {
          dataView: {
            //数据视图工具
            readOnly: false, //不可编辑（只读）
          },
          restore: {}, //配置项还原
          saveAsImage: {}, //保存图片
        },
      },
      legend: {
        //图例
        type: "scroll", //可滚动的图例
        left: "5%", //图例组件离容器左侧的距离：靠左
        orient: "vertical", //图例列表的布局朝向：垂直
        top: "center", //图例组件离容器左侧的距离：居中
        data: ["展示", "点击", "访问", "咨询", "订单"],
        itemStyle: {
          color: "red",
        },
        textStyle: {
          color: "blue",
        },
      },
      series: [
        {
          name: "漏斗图",
          height: "80%",
          type: "funnel", //类型：漏斗图
          left: "20%", //漏斗图组件离容器左侧的距离
          top: 10, //漏斗图组件离容器上侧的距离
          bottom: 60, //漏斗图组件离容器下侧的距离
          width: "80%", //漏斗图组件的宽度
          min: 0, //指定的数据最小值
          max: 100, //指定的数据最大值
          minSize: "0%", //数据最小值 min 映射的宽度
          maxSize: "100%", //数据最大值 max 映射的宽度
          sort: "descending", ////漏斗数据降序排列
          gap: 1, //数据图形间距
          label: {
            //漏斗图图形上的文本标签
            show: true, //显示文本标签
            position: "inside", //标签的位置：漏斗图梯形内部
          },
          labelLine: {
            //标签的视觉引导线样式
            length: 10, //视觉引导线的长度
            lineStyle: {
              //线的样式
              width: 1, //宽度
              type: "solid",
            },
          },
          itemStyle: {
            //图形样式
            borderColor: "#fff", //图形的描边颜色
            borderWidth: 1, //图形描边宽度
          },
          selectedMode: true,

          emphasis: {
            //高亮的标签和图形样式
            borderColor: "#fff",

            label: {
              fontSize: 20, //当鼠标悬停在漏斗某部分上，重点突出文字大小
            },
          },
          data: [
            { value: 50, name: "访问", itemStyle: { color: "#FDD56A" } }, //数据、名称以及颜色
            { value: 30, name: "咨询", itemStyle: { color: "#FDB36A" } }, //数据、名称以及颜色
            { value: 10, name: "订单", itemStyle: { color: "pink" } }, //数据、名称以及颜色
            { value: 70, name: "点击", itemStyle: { color: "#73ACFF" } }, //数据、名称以及颜色
            { value: 90, name: "展示", itemStyle: { color: "#FD866A" } }, //数据、名称以及颜色
          ],
        },
      ],
    };

    const option6 = {
      color: ["#0f63d6", "#0f78d6", "#0f8cd6", "#0fa0d6", "#0fb4d6"],
      tooltip: {
        show: true,
        formatter: "{a} : {c} ",
      },
      legend: {
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 12,
        bottom: "3%",

        data: ["浙江", "上海", "广东", "北京", "深圳"],
        textStyle: {
          color: "rgba(255,255,255,.6)",
        },
      },
      series: [
        {
          name: "浙江",
          type: "pie",
          clockWise: false,
          center: ["50%", "42%"],
          radius: ["59%", "70%"],
          itemStyle: dataStyle,
          hoverAnimation: false,
          data: [
            {
              value: 80,
              name: "01",
            },
            {
              value: 20,
              name: "invisible",
              tooltip: { show: false },
              itemStyle: placeHolderStyle,
            },
          ],
        },
        {
          name: "上海",
          type: "pie",
          clockWise: false,
          center: ["50%", "42%"],
          radius: ["49%", "60%"],
          itemStyle: dataStyle,
          hoverAnimation: false,
          data: [
            {
              value: 70,
              name: "02",
            },
            {
              value: 30,
              name: "invisible",
              tooltip: { show: false },
              itemStyle: placeHolderStyle,
            },
          ],
        },
        {
          name: "广东",
          type: "pie",
          clockWise: false,
          hoverAnimation: false,
          center: ["50%", "42%"],
          radius: ["39%", "50%"],
          itemStyle: dataStyle,
          data: [
            {
              value: 65,
              name: "03",
            },
            {
              value: 35,
              name: "invisible",
              tooltip: { show: false },
              itemStyle: placeHolderStyle,
            },
          ],
        },
        {
          name: "北京",
          type: "pie",
          clockWise: false,
          hoverAnimation: false,
          center: ["50%", "42%"],
          radius: ["29%", "40%"],
          itemStyle: dataStyle,
          data: [
            {
              value: 60,
              name: "04",
            },
            {
              value: 40,
              name: "invisible",
              tooltip: { show: false },
              itemStyle: placeHolderStyle,
            },
          ],
        },
        {
          name: "深圳",
          type: "pie",
          clockWise: false,
          hoverAnimation: false,
          center: ["50%", "42%"],
          radius: ["20%", "30%"],
          itemStyle: dataStyle,
          data: [
            {
              value: 50,
              name: "05",
            },
            {
              value: 50,
              name: "invisible",
              tooltip: { show: false },
              itemStyle: placeHolderStyle,
            },
          ],
        },
      ],
    };

    myChart2.setOption(option2);
    myChart.setOption(option);

    myChart3.setOption(option3);
    myChart4.setOption(option4);
    myChart5.setOption(option5);
    myChart6.setOption(option6);
    window.addEventListener("resize", function () {
      myChart2.resize();
      myChart.resize();
      myChart3.resize();
      myChart4.resize();
      myChart5.resize();
      myChart6.resize();
    });
  };
  return <div> </div>;
}
